// 静态属性，样式属性，剥离数据
const staticOption = {
  grid: {
    left: '10%',
    right: '10%',
    top: '10%',
    bottom: '10%'
  },
  color: ['#decf78'],
  xAxis: {
    max: 100,
    axisLabel: {
      show: false
    },
    axisLine: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    max: 100,
    axisLabel: {
      show: false
    },
    axisLine: {
      show: false
    },
    splitLine: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  graphic: {
    elements: [
      {
        type: 'image',
        style: {
          image: '/static/weishidataview/images/map_bg_2048.png',
          height: 300,
          x: 200
        }
      }
    ]
  },
  series: [
    {
      symbolSize: 10,
      label: {
        show: true,
        position: 'top',
        textStyle: {
          fontSize: 18,
          color: '#07ffff'
        }
      },
      data: [
        {
          value: [62, 73],
          label: {
            formatter: () => '嘉善县:97所'
          }
        }, {
          value: [70, 52],
          label: {
            formatter: () => '平湖市:132所'
          }
        }, {
          value: [53, 56],
          label: {
            formatter: () => '南湖区:114所'
          }
        }, {
          value: [42, 64],
          label: {
            formatter: () => '秀洲区:96所'
          }
        }, {
          value: [38, 32],
          label: {
            formatter: () => '海宁市:155所'
          }
        }, {
          value: [58, 25],
          label: {
            formatter: () => '海盐县:92所'
          }
        }, {
          value: [25, 40],
          label: {
            formatter: () => '桐乡市:119所'
          }
        }, {
          value: [65, 66],
          label: {
            formatter: () => '经开区:50所'
          }
        }
      ],
      type: 'effectScatter',
      rippleEffect: {
        period: 6,
        scale: 3,
        brushType: 'fill'
      }
    }]
}

class ChartFactory {
  constructor (additionalOptions) {
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    this.option = staticOption
    // 装配数据
    this.option.test = additionalOptions
    let screenWidth = window.screen.width
    // let screenHeight = window.screen.height
    let domContainer = document.getElementById('echarts_productionMap')
    console.log(domContainer.clientHeight)
    if (screenWidth > 1024) {
      this.option.graphic.elements[0].style.height = parseInt(domContainer.clientHeight * 0.9)
      this.option.graphic.elements[0].style.width = parseInt(domContainer.clientWidth * 0.8)
      this.option.graphic.elements[0].style.x = parseInt(domContainer.clientWidth * 0.1)
      this.option.graphic.elements[0].style.y = parseInt(domContainer.clientHeight * 0.05)
      if (screenWidth >= 1366 && screenWidth < 1440) {
        this.option.series[0].label.textStyle.fontSize = 14
      }
      if (screenWidth >= 1440 && screenWidth < 1600) {
        this.option.series[0].label.textStyle.fontSize = 14
      }
    } else if (screenWidth === 1024) {
      this.option.graphic.elements[0].style.height = parseInt(domContainer.clientHeight * 0.9)
      this.option.graphic.elements[0].style.width = parseInt(domContainer.clientWidth * 0.8)
      this.option.graphic.elements[0].style.x = parseInt(domContainer.clientWidth * 0.1)
      this.option.graphic.elements[0].style.y = parseInt(domContainer.clientHeight * 0.05)
    }
  }

  // 清理方法，要将部署的新数据全部置空
  getOption () {
    return this.option
  }
}

export { ChartFactory }
